<template>
  <div style="overflow: auto; height: 100%">
    <a-card style="width: 100%">
      <!-- 搜索 -->
      <a-form name="lly" layout="inline" :model="values" @finish="() => onFinish(values)"
        style="margin: 30px 0; background: #fff" expandFixed="true">
        <a-form-item name="price" label="名称">
          <a-input v-model:value="values.name" />
        </a-form-item>
        <a-form-item name="price" label="路径">
          <a-input v-model:value="values.path" />
        </a-form-item>
        <a-form-item name="area" label="状态">
          <a-select v-model:value="values.breas" style="width: 100px;">
            <a-select-option v-for="(item, ind) in zt" :key="ind" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="areas" label="分类">
        </a-form-item>
        <a-form-item expandFixed="right">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button @click="() => toset()">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <br />
    <a-card style="width: 100%">
      <a-space  v-if="state.selectedRowKeys.length!=0">
        <a-button @click="()=>publishall()">发布</a-button>
        <a-button @click="()=>draftall()">下线</a-button>
        <a-button type="dashede" danger @click="()=>removeAll()">删除</a-button>
      </a-space>
      <a-table :dataSource="pageList" :columns="columns" style="width: 100%; height: 100%" :scroll="{ x: 1300 }"
        :row-selection="{ onChange: onSelectChange }" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'address'">
            <div class="edits">
              <a-button @click="()=>toeditpage(record.id)">编辑</a-button>
              <a-button @click="() => tostatus(record)">
                {{ record.status == "publish" ? "下线" : "上线" }}
              </a-button>
              <a-button>查看访问</a-button>
              <a-button @click="() => toremove(record)">删除</a-button>
            </div>
          </template>
          <template v-if="column.key === 'status'">
            <a-badge :status="record.status == 'publish' ? 'success' : 'warning'" />
            {{ record.status == "publish" ? "已发布" : "草稿" }}
          </template>
        </template>
      </a-table>
    </a-card>
    <a-card style="width: 100%">
    <a-pagination v-model:current="current" v-model:page-size="pageSize" :total="total"
      :page-size-options="pageSizeOptions" show-size-changer @showSizeChange="onShowSizeChange"
      @change="handleTableChange" />
  </a-card>
  </div>
</template>



<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { usePage } from "../../store/page";
import { reactive, ref } from "vue"
import {useRouter} from "vue-router"


let router = useRouter();
const pages = usePage();
const { pageList,total} = storeToRefs(pages)
//初始化获取数据
pages.getpages(1, 12)
const values = reactive({
  name: "",
  path: "",
  breas: "",
});

let zt = [
  { label: "已发布", value: "publish" },
  { label: "草稿", value: "draft" },
];

// 初始化搜索数据
localStorage.removeItem("searchobj")
//定义开关
let flag = false;
//定义分页数据
let current = ref(1), pageSize = ref(12);
const pageSizeOptions = ref<string[]>(['8', '12', '16', '20', '24']);
// 表格分页change事件
const handleTableChange = (page: number, pageSizes: number) => {
  // console.log(page,pageSize,"val")
  current.value = page
  pageSize.value = pageSizes
  //点击分页 切换分页 请求数据
  flag = false;
  searchaa()
}
const onShowSizeChange = (currents: number, pageSizes: number) => {
  console.log(currents, pageSizes, "页码，条数");
  current.value = 1
  pageSize.value = pageSizes;
};

let onFinish = (values: any) => {
  flag = true;
  searchaa()
}
//封装一个模糊搜索的方法
let searchaa = () =>{
  let obj = JSON.parse(localStorage.getItem("searchobj")||'{}');

  if(flag){
    obj = {
      page:1,
      pageSize:12
    }
  }else{
    obj = {
      ...obj,
      page:current.value,
      pageSize:pageSize.value
    }
  }
  if(values.name){
    obj = {...obj,name:values.name}
  }
  if(values.path){
    obj = {...obj,path:values.path}
  }
  if(values.breas){
    obj = {...obj,status:values.breas}
  }
  localStorage.setItem("searchobj",JSON.stringify(obj))
  pages.getsearchpages(obj)

}
//重置
const toset = () => {
  location.reload()
}
//更新发布和下线
let tostatus = (val: any) => {
  // console.log(val,"id status")
  let obj = {};
  obj = {
    id: val.id,
    status: val.status == "publish" ? 'draft' : 'publish'
  }
  // console.log(obj,"obj")
  pages.editpublish(obj)
}
//删除单个
const toremove = (val: any) => {
  // console.log(val.id, "id")
  pages.removepage(val.id)
}
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    width: 100,
    fixed: "left",
  },
  {
    title: "路径",
    dataIndex: "path",
    key: "path",
    width: 100,
  },
  {
    title: "顺序",
    dataIndex: "order",
    key: "order",
    width: 100,
  },
  {
    title: "阅读量",
    dataIndex: "views",
    key: "views",
    width: 100,
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: 100,
  },

  {
    title: "发布时间",
    dataIndex: "createAt",
    key: "createAt",
    width: 100,
  },
  {
    title: "操作",
    dataIndex: "address",
    key: "address",
    width: 300,
    fixed: "right",
  },
];
type Key = string | number;
const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});

const onSelectChange = (selectedRowKeys: Key[]) => {
  // console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};
//删除多个
const removeAll = () =>{
  pages.pageallremove(state.selectedRowKeys)
}
const publishall = () =>{
  pages.pageallpublish(state.selectedRowKeys)
}
const draftall = () =>{
  pages.pagealldraft(state.selectedRowKeys)
}
//编辑页面
const toeditpage = (id:any) =>{
  // console.log(id,"id")
  router.push("/editpage/"+id)
}

</script>

<style lang="scss"> .box_domes {
   width: 100%;
   height: 100%;
 }
</style>